<template>

  <Header msg="头部分"  @refreshParent="refreshParent" class="fixed-header"></Header>
  <div ref="targetDiv" class="ycnz">
    <div class="zjneiron">
      <div class="dark_word gaodu" >
        <!-- 声音广场 -->
        <SoundSquare></SoundSquare>
      </div>

    </div>



  </div>
  <Footer msg="脚部分"></Footer>
  <Up_module msg="回到顶部"></Up_module>
</template>



<script>
import { ref, computed, onMounted } from 'vue';
import { Moon, Sunny, Headset, Download, VideoCameraFilled, Document, Upload, VideoPlay } from '@element-plus/icons-vue';
import Footer from '../components/footer.vue';
import Header from '../components/header.vue';
import SoundSquare from '../components/components/SoundSquare.vue';
import Up_module from '../components/up_module.vue';
import "../components/css/Homepage.css";
///配置制作页面

export default {
  components: {
    Footer,
    Header,
    SoundSquare,
    Up_module
  },
  methods: {

  },

  setup() {
    const isDarkMode = ref(false);
    const targetDiv = ref(null);
    const textarea = ref('')


    ///获取cookie
    function getCookie(name) {
      const nameEQ = name + "=";
      const ca = document.cookie.split(';');
      for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
      }
      return null;
    };
    function refreshParent() {

      const user = getCookie('nightMode');
      if (user == "") {
        targetDiv.value.className = "light";
      } else {

        targetDiv.value.className = user;
      }

    };
    // 初始化时设置默认主题
    onMounted(() => {

      const user = getCookie('nightMode');

      if (user == "") {
        targetDiv.value.className = "light";
      } else {
        targetDiv.value.className = user;
      }
    });

    return {
      isDarkMode,
      Headset,
      Document,
      Download,
      VideoCameraFilled,
      Moon,
      Sunny,

      targetDiv,
      textarea,
      VideoPlay,
      SoundSquare,
      refreshParent
    };
  },
};
</script>

<style scoped>
.gaodu{
  min-height: 868px;
}
</style>